import React from 'react';
import '../../styles/TimelineRuler.css';

interface TimelineRulerProps {
    scale?: number; // 每秒对应像素数，默认3px/s
    zoom?: number; // 缩放倍数，默认1
    start?: number; // 当前视图开始时间（秒），默认0
    duration?: number; // 时间轴总时长（秒），默认1000
    width?: number; // 刻度尺总宽度（像素），默认3000
}

const TimelineRuler: React.FC<TimelineRulerProps> = ({
    scale = 3, // 3px为1秒
    zoom = 1,
    start = 0,
    duration = 1000, // 1000秒
    width = 3000, // 3000像素
}) => {
    // 时间转像素的映射函数
    const timeToPx = (time: number): number => {
        return (time - start) * scale * zoom;
    };

    // 格式化时间显示
    const formatTime = (seconds: number): string => {
        const m = Math.floor(seconds / 60)
            .toString()
            .padStart(2, '0');
        const s = Math.floor(seconds % 60)
            .toString()
            .padStart(2, '0');
        return `${m}:${s}`;
    };

    // 生成刻度线
    const generateTicks = () => {
        const ticks = [];
        const endTime = start + duration;

        // 主刻度：每10秒一条，显示时间标签
        for (let t = start; t <= endTime; t += 10) {
            const px = timeToPx(t);
            if (px >= 0 && px <= width) {
                ticks.push(
                    <div key={`major-${t}`} className="ruler-marker major" style={{ left: px }}>
                        <div className="marker-line"></div>
                        <span className="marker-label">{formatTime(t)}</span>
                    </div>
                );
            }
        }

        // 次主刻度：每5秒一条（不与主刻度重叠）
        for (let t = start + 5; t <= endTime; t += 10) {
            const px = timeToPx(t);
            if (px >= 0 && px <= width) {
                ticks.push(
                    <div key={`sub-major-${t}`} className="ruler-marker sub-major" style={{ left: px }}>
                        <div className="marker-line"></div>
                    </div>
                );
            }
        }

        // 普通刻度：每秒一条（不与主刻度和次主刻度重叠）
        for (let t = start; t <= endTime; t += 1) {
            const px = timeToPx(t);
            if (px >= 0 && px <= width && t % 5 !== 0) {
                ticks.push(
                    <div key={`tick-${t}`} className="ruler-marker" style={{ left: px }}>
                        <div className="marker-line"></div>
                    </div>
                );
            }
        }

        return ticks;
    };

    return (
        <div
            className="timeline-ruler"
            style={{
                width: width,
                position: 'relative',
            }}
        >
            {generateTicks()}
        </div>
    );
};

export default TimelineRuler;
export type { TimelineRulerProps };
